<template>
  <div>
    <div class="table-container">
      <div style="margin: 0.4rem 0;color: darkred">查询到{{ totalUser }}个用户</div>
      <div>
        <el-form :inline="true" :model="selectForm" class="demo-form-inline">
          <el-form-item label="员工姓名">
            <el-input v-model="selectForm.user" placeholder="请输入姓名" size="mini" />
          </el-form-item>
          <el-form-item label="归属公司">
            <el-select v-model="selectForm.region" placeholder="请选择公司" size="mini">
              <el-option
                v-for="item in options"
                :key="item.gongSiId"
                :label="item.GONGSINAME"
                :value="item.gongSiId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="归属模板">
            <el-select v-model="selectForm.templateItem" placeholder="请选择模板" size="mini">
              <el-option
                v-for="item in templateList"
                :key="item.id"
                :label="item.templateName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="initData">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <div @click="exportScore">导出数据</div>
      </div>
      <el-table
        v-loading="loading"
        element-loading-text="数据量较大，请耐心等待"
        size="mini"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
        />
        <el-table-column
          prop="userName"
          align="center"
          label="员工姓名"
        />
        <el-table-column
          prop="gongsiName"
          align="center"
          label="公司名"
        />
        <el-table-column
          prop="deptName"
          align="center"
          label="部门名称"
        />
        <el-table-column
          prop="totalScore"
          align="center"
          label="积分"
        />
      </el-table>
      <div style="margin-top: 1rem">
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="totalUser"
          @current-change="getData"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getScoreInfo } from '@/api/report'
import orgList from '@/common/baseData'
import templateMixin from '@/mixin/templateMixin'
export default {
  mixins: [templateMixin],
  data() {
    return {
      tableData: [],
      totalUser: '',
      currentPage: 1,
      pageSize: 10,
      loading: true,
      templateList: [],
      selectForm: {
        user: '',
        region: '',
        templateItem: -1
      },
      options: orgList
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      if (this.selectForm.region == null || this.selectForm.region == '') {
        this.selectForm.region = this.$store.getters.orgInfo.orgId
      }
      if (this.$store.getters.orgInfo.orgId != '003600' && this.$store.getters.orgInfo.orgId != this.selectForm.region) {
        this.$message.error('权限不足，只能查询工号归属地市分公司的数据')
        return
      }
      const params = { 'currentPage': this.currentPage, 'pageSize': this.pageSize,
        'userEparchyCode': this.selectForm.region, 'userName': this.selectForm.user, 'templateId': this.selectForm.templateItem
      }
      getScoreInfo(params).then(res => {
        this.tableData = res.data.records
        this.totalUser = res.data.total
        this.loading = false
      })
    },
    getData(val) {
      this.currentPage = val
      this.loading = true
      this.initData()
    },
    toPage(val) {
      this.$router.push(val)
    },
    exportScore() {
      let orgId = this.selectForm.region
      if (this.$store.getters.orgInfo.orgId != '003600' && this.$store.getters.orgInfo.orgId != this.selectForm.region) {
        orgId = this.$store.getters.orgInfo.orgId
      }
      window.open('http://127.0.0.1:8059/report/export?orgId=' + orgId)
      // const params = {
      //   orgId: this.selectForm.region
      // }
      // exportUserScore(params).then(res=>{
      //   this.$message.info('正在导出')
      // })
    }
  }
}
</script>
<style scoped>
.table-container{
  padding: 1rem;
}
.menu{
  display: flex;
  margin: 0.2rem 0;
}
.menu li{
  cursor: pointer;
  width: 1rem;
  margin-right: 1rem;
}
</style>
